// // my-app/src/components/biogComponent/BlogDetail.js
// import React, { useEffect, useState } from 'react';
// import { fetchBlogById } from '../../util/actions/blogAction';
// import { Spin } from 'antd';
// import AttachmentDetail from './AttachmentDetail';
// import CommentDetail from './CommentDetail';

// const BlogDetail = ({ blogId }) => {
//   const [blog, setBlog] = useState(null);
//   const [loading, setLoading] = useState(true);

//   const fetchDetails = async () => {
//     try {
//       const blogData = await fetchBlogById(blogId);
//       setBlog(blogData);
//       setLoading(false);
//     } catch (error) {
//       console.error(error);
//       setLoading(false);
//     }
//   };

//   useEffect(() => {
//     fetchDetails();
//   }, [blogId]);

//   if (loading) return <Spin />;

//   return (
//     <div>
//       <h1>{"标题：" + blog.title}</h1>
//       <p>{blog.content}</p>
//       <p>{blog.created_at}</p>
//       <p>{blog.updated_at}</p>
//       <AttachmentDetail blogId={blogId} />
//       <CommentDetail blogId={blogId} />
//     </div>
//   );
// };

// export default BlogDetail;

import React, { useEffect, useState } from 'react';
import { fetchBlogById } from '../../util/actions/blogAction';
import { Spin } from 'antd';
// import AttachmentDetail from './AttachmentDetail';
// import CommentDetail from './CommentDetail';
import AttachmentDetail from './AttachmentDetail';
import CommentDetail from './CommentDetail';
const BlogDetail = ({ blogId }) => {
  const [blog, setBlog] = useState(null);
  const [loading, setLoading] = useState(true);

  const fetchDetails = async () => {
    try {
      const blogData = await fetchBlogById(blogId);
      setBlog(blogData);
      setLoading(false);
    } catch (error) {
      console.error(error);
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchDetails();
  }, [blogId]);

  if (loading) return <Spin />;

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>{"标题：" + blog.title}</h1>
      <p style={styles.content}>{blog.content}</p>
      <div style={styles.timestamps}>
        <p style={styles.timestamp}>{"创建时间：" + blog.created_at}</p>
        <p style={styles.timestamp}>{"修改时间：" + blog.updated_at}</p>
      </div>
      <AttachmentDetail blogId={blogId} />
      <CommentDetail blogId={blogId} />
    </div>
  );
};

const styles = {
  container: {
    padding: '20px',
    fontFamily: 'Arial, sans-serif',
    lineHeight: '3',
    color: '#333',
    backgroundColor: '#f9f9f9',
    borderRadius: '10px',
    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
    maxWidth: '1500px',
    margin: '20px auto'
  },
  title: {
    textAlign: 'center',
    fontSize: '2em',
    marginBottom: '20px',
    color: '#2c3e50'
  },
  content: {
    fontSize: '1.2em',
    marginBottom: '20px',
    color: '#34495e'
  },
  timestamps: {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: '20px'
  },
  timestamp: {
    fontSize: '0.9em',
    color: '#7f8c8d'
  }
};

export default BlogDetail;
